<template>
  <van-swipe-cell :right-width="80">
    <van-cell-group>
      <view
        class="MyFocus animate__animated animate__bounceInRight"
        @click="skipToUserDetail"
      >
        <image :src="focusDetail.avatar" class="avatar"></image>
        <view class="userInfo">
          <view>{{ focusDetail.nickName }}</view>
          <view style="font-size: 26rpx; margin: 10rpx 0">{{
            focusDetail.introduce
          }}</view>
          <view class="tagBox">
            <van-tag
              v-for="(i, index) in focusDetail.tags"
              class="tag"
              color="#05A47D"
              size="medium"
              :key="index"
              >{{ i }}</van-tag
            >
          </view>
        </view>
      </view>
    </van-cell-group>
    <view slot="right">
      <view class="rightBox" @click="handleFocus" style="width: 150rpx"
        >取消关注</view
      >
    </view>
  </van-swipe-cell>
</template>

<script>
export default {
  name: "MyFocus",
  props: {
    focusDetail: {
      type: Object,
      required: true,
    },
  },
  methods: {
    skipToUserDetail() {
      uni.navigateTo({
        url: `/pages/UserInfo/UserInfo?userDetail=${encodeURIComponent(
          JSON.stringify(this.focusDetail)
        )}`,
      });
    },

    // 取消关注
    async handleFocus() {
      const focusId = this.focusDetail._openid,
        isFocus = false;
      try {
        await this.$store.dispatch("focusUser", { focusId, isFocus });
        this.$emit("refreshUserFocus");
        uni.showToast({
          icon: "success",
          title: "取关成功",
        });
      } catch (err) {
        console.log("取关失败：", err);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.MyFocus {
  box-sizing: border-box;
  padding: 10rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #999;
  background-color: #fff;
  height: 180rpx;
  border-radius: 8rpx;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  .avatar {
    width: 130rpx;
    height: 130rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
  .tag {
    margin-right: 10rpx;
  }
}
.rightBox {
  line-height: 180rpx;
  height: 180rpx;
  text-align: center;
  font-size: 30rpx;
  background-color: #05a47d;
  color: #fff;
}
</style>
